<template>
    <div class="visit-event">
        <!-- <el-switch v-model="visible" active-text="显示" inactive-text="隐藏"></el-switch> -->
        <div class="exclusive-item" v-for="(item, index) in pageList" :key="index">
            <input type="checkbox" name="page-check" :value="index" />
            <label :for="item.id + item.name" class="check-label">{{item.name}}</label>
        </div>
    </div>
</template>

<script>
import store from '@/js/store/state.js';
import bus from '@/js/event/bus.js';

export default {
    props: {
        eventData: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            pageList: store.getPageList(),
            visible: true
        };
    },
    mounted() {
        bus.on('getEventData', this.getEventData);
        this.$nextTick(() => {
            if (this.eventData.length > 0 && this.eventData[0].event === 'visit') {
                this.setEventData(this.eventData[0]);
            }
        });
    },
    destroyed() {
        bus.off('getEventData', this.getEventData);
    },
    methods: {
        getEventData() {
            let checkbox = document.getElementsByName('page-check');
            let list = [];
            for (let i = 0; i < checkbox.length; i++) {
                if (checkbox[i].checked === true) {
                    list.push(Number(checkbox[i].value));
                }
            }
            if (list.length === 0) {
                return {
                    error: true,
                    message: ['没有选择需要显隐页面！']
                };
            } else {
                return list;
            }
        },
        setEventData(event) {
            // this.visible = event.param.visible || true;
            let checkbox = document.getElementsByName('page-check');
            // let pageMap = {};
            // for (let i = 0; i < this.pageList.length; i ++) {
            //     pageMap[this.pageList[i].id] = i;
            // }
            for (let i = 0; i < event.param.length; i ++) {
                // checkbox[pageMap[event.param[i]]].checked = true;
                checkbox[event.param[i]].checked = true;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.visit-event {
    height: 100%;
}
.exclusive-item {
    margin: 5px;
    display: flex;
    align-items: center;
    .check-label {
        margin-left: 10px;
        color: #ffffff80;
        font-size: 13px;
    }
}
::v-deep.el-switch .el-switch__label {
    color: #FFFFFF80;
    > span {
        font-size: 12px;
    }
}
::v-deep.el-switch .is-active {
    color: #FFFFFFE6;
    > span {
        font-size: 12px;
        font-weight: 600;
    }
}
</style>